import { FC, useMemo } from 'react';
import { Input, DatePicker } from 'antd';

import RbProTable from '@components/RbProTable';
import { Content } from '@components/Page';

import { COMMON_REQUIRE_RULE, VALIDATE_COMMON_CODE, COMPLETELY_FILL_STYLE } from '@utils/config';

interface AssistSearchProps {}

const AssistSearch: FC<AssistSearchProps> = () => {
  /** 查询条配置列表 */
  const queryFromItems = useMemo(
    () => [
      {
        name: 'name',
        label: '名称',
        children: <Input />
      },
      {
        name: 'code',
        label: '编码',
        children: <Input />
      },
      {
        name: 'date',
        label: '日期',
        children: <DatePicker style={COMPLETELY_FILL_STYLE} />
      },
      {
        name: 'rangDate',
        label: '范围日期',
        children: <DatePicker.RangePicker />
      }
    ],
    []
  );

  /** 表格列配置 */
  const columns = useMemo(
    () => [
      {
        title: '名称',
        dataIndex: 'name',
        sorter: true
      },
      {
        title: '编码',
        dataIndex: 'code',
        sorter: true
      }
    ],
    []
  );

  /** 新增表单配置 */
  const addFormItems = useMemo(
    () => [
      {
        name: 'name',
        label: '名称',
        rules: [COMMON_REQUIRE_RULE],
        children: <Input />
      },
      {
        name: 'code',
        label: '编码',
        tooltip: VALIDATE_COMMON_CODE.message,
        rules: [COMMON_REQUIRE_RULE, VALIDATE_COMMON_CODE],
        children: <Input allowClear />
      },
      {
        name: 'remark',
        label: '备注',
        children: <Input.TextArea />
      }
    ],
    []
  );

  /** 编辑表单配置 */
  const updateFormItems = useMemo(
    () => [
      {
        name: 'name',
        label: '名称',
        rules: [COMMON_REQUIRE_RULE],
        children: <Input />
      },
      {
        name: 'code',
        label: '编码',
        tooltip: VALIDATE_COMMON_CODE.message,
        rules: [COMMON_REQUIRE_RULE, VALIDATE_COMMON_CODE],
        children: <Input disabled allowClear />
      },
      {
        name: 'remark',
        label: '备注',
        children: <Input.TextArea />
      }
    ],
    []
  );

  return (
    <Content>
      <RbProTable
        rowKey="id"
        columns={columns}
        actionUrl="/develop/assistSearch"
        queryConfig={{
          queryFromItems,
          queryFormat: { date: 'YYYY' }
        }}
        addConfig={{ addFormItems }}
        updateConfig={{ updateFormItems }}
        selectionType
        toolBarRender={() => ['add', 'update', 'delete']}
      />
    </Content>
  );
};

export default AssistSearch;
